<template>
  <!-- 回复 -->
  <div class="iner">
    <el-input maxlength="140" :placeholder="nickName + ':'" show-word-limit type="textarea" :rows="2" v-model="contents"/>
    <div class="btn_comment">
      <el-button @click="handleClickCloseReply">取消</el-button>
      <el-button type="primary" @click="handleClickReplySecond">评论</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, toRefs, watch } from 'vue'
const contents = ref<string>('')
const emit = defineEmits(['handleClickCloseReply','handleClickReplySecond'])
const props = defineProps({
  // 回复的人的名称
  nickName: {
    type: String,
    default: ''
  },
})
const { nickName } = toRefs(props)
// 关闭回复框
const handleClickCloseReply = () => {
  emit('handleClickCloseReply')
}
// 二级评论回复
const handleClickReplySecond = ()=>{
  emit('handleClickReplySecond',contents.value)
}
</script>
<style lang='scss' scoped>
.iner {
  margin-top: 20px;
}
.btn_comment {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>